<script lang="ts" setup>
import { watch } from 'vue'
import useStore from '../store'

const { art, nav } = useStore()

// art.getArtList(1)
// 添加监听当数据发生变化的时, 重兴发送请求 => 侦听器

watch(
  () => nav.activeID,
  () => {
    art.getArtList(nav.activeID)
  }
)
 </script>

<template>
  <div className="list">
    <div
      className="article_item"
      v-for="item in art.artList"
      :key="item.art_id"
    >
      <h3 className="van-ellipsis">{{ item.title }}</h3>
      <div className="img_box">
        <img
          :src="
            item.cover.images?.[0] ||
            'http://geek.itheima.net/resources/images/11.jpg'
          "
          className="w100"
          alt=""
        />
      </div>
      <div className="info_box">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>

<style scoed lang="less"></style>
